<template>
  <div id="home" style="background-image: url(static/background.png); margin: 0">
    <div class="navbar navbar-inverse">
      <table class="title">
        <tr id="title_tr">
          <td style="width: 60%"><a v-on:click="" id="titleText">在 线 购 物 系 统</a></td>
          <td class="title_td"><a v-bind:href="href[1]" class="astyle">商品列表</a></td>
          <td class="title_td"><a class="astyle" @click="open">商品状态</a></td>
          <td class="title_td"><a v-bind:href="href[2]" class="astyle">商家登录</a></td>
        </tr>
      </table>
    </div>
    <div class="bd" id="main">
      <div style="width: 10%; height: 100%; background: #9acfea; float: left">
        <div id="d1" v-bind:style="flag.w1? styleSelectOn: styleSelectOff" v-on:click="change('w1')">商品简介</div>
        <div id="d2" v-bind:style="flag.w2? styleSelectOn: styleSelectOff" v-on:click="change('w2')">商品图片</div>
        <div id="d3" v-bind:style="flag.w3? styleSelectOn: styleSelectOff" v-on:click="change('w3')">商品信息</div>
      </div>
      <div style="width: 90%; height: 100%; float: left; position: relative; background: #d9edf7" id="w1" v-bind:style="!flag.w1? {'display': 'none'}: ''" >
        <div style="width: 45%; height: 80%; float: left;  z-index: 0; overflow: hidden; margin-top: 5%">
          <img v-bind:src="good.goodPicture[0]" class="i1">
        </div>
        <div style="float: left; width: 55%; height: 90%; margin-top: 5%; overflow: hidden">
          <div style="padding-top: 10%; text-align: left">
            <h1 style="margin: 0 auto">{{good.goodName}}</h1>
            <br/>
          </div>
          <div style="padding-top: 2%; padding-bottom: 2%; text-align: left; background-image: url(static/price3.png)">
            <span style="color: orangered; font-size: large; text-align: center; padding-bottom: 15px">价格</span><span style="color: orangered; font-size: xxx-large; text-align: center; margin-left: 10%">￥{{good.goodPrice}}</span>
          </div>
          <div style="position: relative; top: 15%; height: 12%; width: 40%">
            <input type="button" value="选购" class="button1" v-on:click="buy">
          </div>
        </div>
      </div>
      <div style="width: 90%; height: 100%;float: left; background: #d9edf7; position: relative" id="w2" v-bind:style="!flag.w2? {'display': 'none'}: ''" >
        <div style="margin: 0 auto; text-align: center; margin-top: 5%">
          <img v-bind:src="good.goodPicture[count]" class="i2" id="picture">
        </div>
        <div style="position: absolute; left: 50%; transform: translate(-50%); margin-top: 5%">
          <div style="display: inline-block"><img src="static/back.png" style="width: 50px; height: 50px; cursor: pointer;" v-on:click="left"></div>
          <div style="display: inline-block; white-space: nowrap; height: 75px; line-height: 75px">
            <!--                <span style="max-width: 30%; box-shadow: 0px 0px 10px #2e6da4" v-for="item in good.goodPicture"><img v-bind:src="item" style="width: 50px; height: 50px;"></span>-->
            <span class="s2"><img v-bind:src="good.goodPicture[(count - 2) >= 0?count - 2:(count -2) == -1?good.goodPicture.length - 1:good.goodPicture.length - 2]" class="img1"></span>
            <span class="s2"><img v-bind:src="good.goodPicture[(count - 1) >= 0?count - 1:(count -1) == 0?0:good.goodPicture.length - 1]" class="img1"></span>
            <span class="s2"><img v-bind:src="good.goodPicture[count < good.goodPicture.length?count:0]" class="img2"></span>
            <span class="s2"><img v-bind:src="good.goodPicture[(count + 1) < good.goodPicture.length?count + 1:(count + 1) == (good.goodPicture.length +1)?1:0]" class="img1"></span>
            <span class="s2"><img v-bind:src="good.goodPicture[(count + 2) < good.goodPicture.length?count + 2: (count + 2) == (good.goodPicture.length + 1)?1:(count + 2) == (good.goodPicture.length + 2)?2:0]" class="img1"></span>
          </div>
          <div style="display: inline-block"><img src="static/more.png" style="width: 50px; height: 50px; cursor: pointer;" v-on:click="right"></div>
        </div>
      </div>
      <div style="width: 90%; height: 100%; float: left; background: #d9edf7" id="w3" v-bind:style="!flag.w3? {'display': 'none'}: ''">
        <div style="margin-top: 10%; margin-left: 5%; margin-right: 5%;">
          <span class="sp1">商品名称：</span><span class="sp2">{{good.goodName}}</span>
        </div>
        <div style="margin-top: 3%; margin-left: 5%; margin-right: 5%;">
          <span class="sp1">商品状态：</span><span class="sp2">{{good.freeze|isFreeze}}</span>
        </div>
        <div style="margin-top: 5%; margin-left: 5%; margin-right: 5%; border: 3px #a94442; border-radius: 10px; z-index: 9999; border-style: dotted">
          <span class="sp1">{{good.description}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      temp: {},
      flag: {"w1": true, "w2": false, "w3": false},
      count: 0,
      good: {
        "goodName": "超级无敌大芒果2",
        "goodPrice": "9982",
        "goodPicture": ["static/m1.png", "static/m2.png", "static/m3.png", "static/mg.png",
          "static/m1.png", "static/m2.png", "static/m3.png", "static/mg.png"],
        "freeze": true,
        "description": "2这是一批来自中国浙江的芒果，它们在亨亨细心的呵护下长大。味道甜美，鲜嫩多汁。是休闲娱乐，送亲朋好友的不俗选择！"
      },
      styleSelectOn : {
        'height': '33.3%',
        'width': '100%',
        'writing-mode': 'vertical-lr',
        'font-size': 'xx-large',
        'font-family': 'Microsoft Himalaya',
        'color': 'white',
        'text-align': 'center',
        'cursor': 'pointer',
        'background': '#2e6da4'
      },
      styleSelectOff : {
        'height': '33.3%',
        'width': '100%',
        'writing-mode': 'vertical-lr',
        'font-size': 'xx-large',
        'font-family': 'Microsoft Himalaya',
        'color': 'white',
        'text-align': 'center',
        'cursor': 'pointer'
      },
      href : ['home.html', 'home.html', '#/sign_in']
    }
  },
  methods: {
    change: function (value) {
      if (value === "w1") {
        this.flag.w1 = true;
        this.flag.w2 = false;
        this.flag.w3 = false;
      } else if (value === "w2") {
        this.flag.w1 = false;
        this.flag.w2 = true;
        this.flag.w3 = false;
      } else if (value === "w3") {
        this.flag.w1 = false;
        this.flag.w2 = false;
        this.flag.w3 = true;
      }
    },
    left: function () {
      if (this.count === 0) {
        this.count = this.good.goodPicture.length - 1;
      } else {
        this.count --;
      }
    },
    right: function () {
      if (this.count === this.good.goodPicture.length - 1) {
        this.count = 0;
      } else {
        this.count ++;
      }
    },
    buy: function () {
      if (this.good.freeze) {
        this.$message({
          message: "商品已冻结, 无法购买",
          type: "error"
        });
      } else {
        this.$router.push('/information');
      }
    },
    // _isMobile() {
    //   let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
    //   if (flag) {
    //     alert("手机端");
    //   } else {
    //     alert("PC端");
    //   }
    //   return flag;
    // },
    open() {
      if (this.good.freeze) {
        this.$message({
          message: "商品已冻结",
          type: "error"
        });
      } else {
        this.$message({
          message: "商品正在出售",
          type: "success"
        });
      }
    },
  },
  filters: {
    isFreeze: function (value) {
      if (value) {
        return "冻结"
      } else {
        return  "在售"
      }
    },
  },
  created() {
    this.$http.post("http://rap2api.taobao.org/app/mock/293261/home/data").then((res) =>{
      console.log(res.data)
      this.temp = res.data;
      this.good.goodName = res.data.goods[0].goodName;
      this.good.description = res.data.goods[0].description;
      this.good.goodPrice = res.data.goods[0].goodPrice;
      this.good.freeze = res.data.goods[0].freeze;
    })
    // this.$http.post("https://jxzyjpx.zjgsu.edu.cn/ticket_sysytem/tickets/ticket_search_all.php").then(res => {
    //   console.log(res.data);
    // })
  }
}
</script>

<style scoped>
#home {
  background-size: 100% 100%;
  height: 100%;
  position: fixed;
  width: 100%
}
.navbar {
  margin: 0 auto;
  margin-bottom: 0;
  position: fixed;
  left: 20px;
  right: 20px;
  z-index: 9999;
}
#titleText{
  background-color: #037bd2;
  font-size: xxx-large;
  color: whitesmoke;
  transition-duration: 0.4s;
  border: none;
  width: 100%;
  text-decoration: none;
  cursor:pointer
}
a.astyle{
  background-color: #037bd2;
  font-size: xx-large;
  color: whitesmoke;
  transition-duration: 0.4s;
  border: none;
  width: 100%;
  text-decoration: none;
  cursor:pointer
}
.astyle:hover{
  color: lightgray;
}
#title_tr{
  color: #037bd2;
  border-style: none;
  text-align: center;
}
td.title_td{
  border-style: none;
}
table.title{
  position: fixed;
  width: 98%;
  height: 10%;
  margin: 0 auto;
  top: 0;
  background-color: #037bd2;

}
.bd{
  position:fixed;
  top: 18%;
  left: 20%;
  right: 20%;
  height: 70%;
}
.dh{
  height: 33.3%;
  width: 100%;
  writing-mode: vertical-lr;
  font-size: xx-large;
  font-family: "Microsoft Himalaya";
  color: white;
  text-align: center;
  cursor: pointer;

}
/*.dh:hover{*/
/*    background-color: #2e6da4;*/
/*}*/
/*.dh:visited{*/
/*    background-color: #2e6da4;*/
/*}*/
.i1{
  width: 400px;
  height: 400px;
  background-size: 100%;
  border-radius: 10px;
  position: relative;
  top: 10%;
  left: 2.5%;
}
.i2{
  width: 300px;
  height: 300px;
  background-size: 100% 100%;
  border-radius: 10px;
}
.i3{
  width: 50px;
  height: 50px;
  background-size: 100% 100%;
}
.button1{
  margin: 0 auto;
  background-color: salmon; /* Green */
  border: none;
  color: white;
  margin-top: 5%;
  padding: 15px 30px;
  width: 100%;
  height: 100%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 32px;
  border-radius: 5px;
}
.button1:active {
  background-color: #e4b9c0;
  box-shadow: 0 5px #d9edf7;
  transform: translateY(4px);
}
.sp1 {
  font-family: "Microsoft Himalaya";
  color: #a94442;
  font-style: italic;
  font-size: x-large;
}
.sp2 {
  font-family: "Microsoft Himalaya";
  font-size: large;
  font-style: inherit;
  margin-left: 5%;
  color: #a94442;

}
.s1 {
  cursor: pointer;
  display: table-cell;
  vertical-align: middle;
}

img.img1 {
  width: 50px;
  height: 50px;
  line-height: 75px;
}

img.img2 {
  width: 75px;
  height: 75px;
  line-height: 75px;
  box-shadow: inset 0 1px 1px white,0 0 8px lightskyblue;
}
span.s2 {
  display: inline-block;
  vertical-align: middle;
}
</style>
